<template>
    <div>
        <div class="main" ref="main"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts"

    export default {
        name: "BarView2",
        data(){
            return {
                myChart :null,
                option :{
                    tooltip : {
                        trigger : "item"
                    },
                    title : {
                        text : "堆叠柱状图",
                        left : "center",
                        top : 10
                    },
                    xAxis:{
                        data: ['A', 'B', 'C', '男性', '女性']
                    },
                    yAxis : {},
                    series : [
                        {
                            type : "bar",
                            name : "成年男性",
                            data: [10, 22, 28, 43, 49],
                            stack :"xxx"
                        },
                        {
                            type : "bar",
                            name : "男孩",
                            data: [5, 4, 3, 5, 10],
                            stack :"xxx"
                        }
                    ]
                    // 只要设置相同的stack值就可以发生堆叠
                }

            }
        },
        mounted(){
            this.myChart = echarts.init(this.$refs.main);
            this.myChart.setOption(this.option)
        }
    }
</script>

<style scoped>
    .main {
        width: 60vw;
        height: 550px;
        box-shadow: 1px 1px 10px #333;
        margin: 20px auto;
    }
</style>